<template>
    <div>
        <h1>watch监听器-bug</h1>
        {{ obj }} --- {{ arr }}
        <p>
            <button @click="handleClick">点击</button>
        </p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            obj:{
                // name:""
            },
            arr:[100,200,300,400]
        }
    },
    methods:{
        handleClick(){
            // 1 vue的bug
            // 在data中定义了对象,然后再对象中添加对象的属性,域名渲染不出来
            // *解决方法1:在对象中定义name属性

            // 解决方法2:this.$forceUpdate() 强制更新视图
            // this.obj.name="于鸿斌"
            // this.$forceUpdate()

            // 解决方法3:this.$set("要修改的数组/对象","数组的下标/对象的属性","要赋值")
            // this.$set(this.obj,"name","于鸿斌")

            // 2 watch监听不到的情况?
            // 定义了数组,我想修改数组的值,没有监听到.解决方法:this.$set
            // this.arr[0]="99"
            // this.$set(this.arr,0,"于鸿斌")
            
            // 清空数组,监听不到
            // this.arr.length = 0
            // 解决方法:直接赋值为[]或者通过splice删除
            // this.arr=[]
            this.arr.splice(0,this.arr.length)
        }
    },
    watch:{
        arr(newVal){
            console.log(newVal,"数据发生了改变")
        }
    }
}
</script>